<!--Vue 组件，用于提供搜索和一些操作按钮的功能。
该组件的功能包括关键字搜索、下拉选项搜索、云主机搜索、云硬盘搜索、容器搜索等等。-->
<template>
  <div @keyup.enter="onSearch">
    <el-row>
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
        <div v-if="basicFacility" />
        <div v-else class="div-show-total base">
          {{ $t('now_have') }} <span class="font-bold">{{ itemNumber }}</span> {{ itemName }}
          <!-- <ingress v-if="domain"> ({{ 'Ingress'+$t('service')+$t('port') }}: {{ ingNodePort }})</ingress> -->
        </div>
      </el-col>
      <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
        <div class="div-operation">
          <el-button v-if="configuration" type="primary" class="btn-next-to" icon="el-icon-setting" @click="$emit('on-config')">{{ $t('config') }}</el-button>
          <el-button v-if="search" type="primary" class="btn-next-to" icon="el-icon-search" @click="hidePanel = !hidePanel;showCreate = false">{{ $t('search') }}</el-button>
          <el-button v-if="dropdown" type="primary" class="btn-next-to" icon="el-icon-search" @click="container = !container;showCreate = false">{{ $t('search') }}</el-button>
          <el-button v-if="create || createProf" type="primary" class="btn-next-to" icon="el-icon-circle-plus-outline" @click="confirmCreate">{{ $t('new') }}</el-button>
          <el-dropdown v-if="specialCreate" style="margin-left: 10px;" trigger="click" @command="speacialCreate">
            <el-button type="primary" icon="el-icon-circle-plus-outline">{{ $t('new') }}<i class="el-icon-arrow-down el-icon--right" /></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="autoCreate">{{ $t('auto_create') }}</el-dropdown-item>
              <el-dropdown-item command="manualCreate">{{ $t('manual_create') }}</el-dropdown-item>
              <el-dropdown-item command="importFrom">{{ $t('import') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <!--      <div v-if="basicFacility" class="search-form">-->
      <!--        <el-form label-width="80px" @submit.native.prevent>-->
      <!--          &lt;!&ndash;  关键字搜索        &ndash;&gt;-->
      <!--          <el-form-item :label="$t('keyword')">-->
      <!--            <el-input v-model="searchVal" clearable />-->
      <!--          </el-form-item>-->
      <!--          <el-form-item>-->
      <!--            <el-button type="primary" @click="onSearch">{{ $t('search') }}</el-button>-->
      <!--            <el-button @click="onClear()">{{ $t('clear') }}</el-button>-->
      <!--          </el-form-item>-->
      <!--        </el-form>-->
      <!--      </div>-->
      <!--      搜索-->
      <div v-if="hidePanel" class="search-form">
        <el-form label-width="80px" @submit.native.prevent>
          <!--          关键字搜索-->
          <el-form-item v-if="methodology" :label="$t('keyword')">
            <el-input v-model="searchVal" :placeholder="$t('Search_method_by_name_description')" clearable />
          </el-form-item>
          <el-form-item v-if="application" :label="$t('keyword')">
            <el-input v-model="searchVal" :placeholder="$t('Search_app_by_name_description')" clearable />
          </el-form-item>
          <el-form-item v-if="workflow" :label="$t('keyword')">
            <el-input v-model="searchVal" :placeholder="$t('Search_workflow_by_name_content')" clearable />
          </el-form-item>
          <el-form-item v-if="user" :label="$t('keyword')" label-width="75px">
            <div style="align-items: center; margin-left: 5px;">
              <el-input 
                v-model="searchVal" 
                :placeholder="$t('Search_user_by_name_or_telephone_or_email')" 
                clearable 
              />
            </div>
          </el-form-item>
          <el-form-item v-if="user" :label="$t('user') + $t('type')">
            <el-select 
              v-model="status" 
              :placeholder="$t('choose') + $t('group')" 
              clearable 
              @keydown.enter.native="disableVisible" 
            >
              <el-option
                v-for="item in userGroupList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-row type="flex" justify="right" style="margin-right: 40px">
            <el-form-item>
              <el-button type="primary" @click="onSearch">{{ $t('search') }}</el-button>
              <el-button @click="onClear()">{{ $t('clear') }}</el-button>
            </el-form-item>
          </el-row>
          <!--          <el-form-item v-if="dropdown" :label="dropdownName">-->
          <!--            <el-select v-model="dropdownItem" clearable>-->
          <!--              <el-option-->
          <!--                v-for="item in dropdownItems"-->
          <!--                :key="item"-->
          <!--                :label="item"-->
          <!--                :value="item"-->
          <!--              />-->
          <!--            </el-select>-->
          <!--          </el-form-item>        -->
        </el-form>
      </div>
        
          <!-- 容器的搜索下拉菜单 -->
          <div v-if="container">
            <el-row>
              <el-col :span="8">
                <el-form-item :label="$t('status')">
                  <el-select ref="selectBox" v-model="status" :placeholder="$t('choose')+$t('status')" clearable @keydown.enter.native="disableVisible">
                    <el-option
                      v-for="item in statusList"
                      :key="item.id"
                      :label="item.value"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('namespace')">
                  <el-select ref="selectBox" v-model="namespace" :placeholder="$t('choose')+$t('namespace')" clearable @keydown.enter.native="disableVisible">
                    <el-option
                      v-for="item in nsList"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('template')">
                  <el-select ref="selectBox" v-model="chart" :placeholder="$t('choose')+$t('template')" filterable clearable @keydown.enter.native="disableVisible">
                    <el-option
                      v-for="item in chartList"
                      :key="item.id"
                      :label="item.chartName"
                      :value="item.chartName"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>    
          <!-- 标签
            <el-form-item :label="$t('label')">
              <el-checkbox-group v-model="labels">
                <el-checkbox-button v-for="label in selectLabels" :key="label.id" :label="label.id" style="margin: 0 5px 5px 0;">{{ label.name }}</el-checkbox-button>
              </el-checkbox-group>
            </el-form-item>
          </div>-->
      <!--  新建  -->
      <div v-if="showCreate && createProf" class="search-form">
        <el-form label-width="80px" @submit.native.prevent>
          <el-row>
            <el-form-item v-if="createProf" :label="$t('key')">
              <el-input v-if="createProf" v-model="profVal.key" style="width: auto" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item v-if="createProf" :label="$t('value')">
              <el-input v-if="createProf" v-model="profVal.value" style="width: auto" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item v-if="createProf" :label="$t('description')">
              <el-input v-model="profVal.description" style="width: auto" />
            </el-form-item>
          </el-row>
          <el-row style="margin-right: 40px">
            <el-form-item>
              <el-button type="primary" @click="onCreate">{{ $t('new') }}</el-button>
              <el-button @click="onClear()">{{ $t('clear') }}</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    itemNumber: Number,
    itemName: String,
    configuration: Boolean,
    methodology: Boolean,
    workflow: Boolean,
    application: Boolean,
    user: Boolean,
    search: Boolean,
    create: Boolean,
    createProf: Boolean,
    /*
    label: Boolean,
    storage_class: Boolean,
    dropdown: Boolean,
    dropdownItems: Array,
    dropdownName: String,
    hideInput: Boolean,
    domain: Boolean,
    ingNodePort: Number,
    */
    basicFacility: Boolean,
    specialCreate: Boolean
  },
  data() {
    return {
      status: 0,
      hidePanel: false,
      showCreate: false,
      searchVal: '',
      profVal: {
        key: '',
        value: '',
        description: ''
      },
      userGroupList: [
        { id: 0, label: '全部' },
        { id: 1, label: '管理员' },
        { id: 2, label: '开发者' },
        { id: 3, label: '用户' }
      ]
      // labels: [],
      // dropdownItem: '',
      // host: '',
      // image: '',
      // status: '',
      // namespace: '',
      // chart: ''
    }
  },
  // emits: ['on-search', 'on-create', 'on-label', 'on-storage_class', 'on-template-center', 'on-import', 'on-image-center', 'on-alertmanager', 'on-config'],
  emits: ['on-search', 'on-create', 'on-config'],
  methods: {
    // onSearch 方法用于提交搜索，它会根据不同的搜索类型，向父组件发送不同的参数。
    onSearch() {
      /*
      if (this.container) {
        this.$emit('on-search', this.inputVal, this.status, this.namespace, this.chart, this.labels)
      } else if (this.cloud_host) {
        this.$emit('on-search', this.inputVal, this.status, this.host, this.image)
      } else if (this.cloud_disk) {
        this.$emit('on-search', this.inputVal, this.status)
      } else if (this.dropdown) {
        this.$emit('on-search', this.inputVal, this.dropdownItem)
      } else {
        this.$emit('on-search', this.inputVal)
      }
       */
      if (this.methodology) {
        this.$emit('on-search', this.searchVal)
      }
      if (this.workflow) {
        this.$emit('on-search', this.searchVal)
      }
      if (this.application) {
        this.$emit('on-search', this.searchVal)
      }
      if (this.user) {
        this.$emit('on-search', this.searchVal, this.status)
      }
    },
    // onCreate 方法用于提交新建,它会根据不同的新建类型发送不同的参数
    onCreate() {
      // if (this.createProf) {
      //   this.$emit('on-create', this.profVal.key, this.profVal.value, this.profVal.description)
      // }
      // 先隐藏面板
      this.hidePanel = false
      if (this.createProf) {
        const newProfile = {
          key: this.profVal.key,
          value: this.profVal.value,
          description: this.profVal.description
        }
        console.log(newProfile)
        // 发出创建事件，通知父组件执行创建操作
        this.$emit('on-create', newProfile)
        // 清空输入，准备下一次创建
        this.onClear()
      }
      // 切换创建面板的显示状态
      this.showCreate = !this.showCreate
    },
    confirmCreate() {
      this.hidePanel = false
      this.showCreate = !this.showCreate
      if (this.create) {
        this.$emit('on-create')
      }

      // // 先隐藏面板
      // this.hidePanel = false
      // // 如果是创建新条目，则调用创建逻辑
      // if (this.createProf) {
      //   const newProfile = {
      //     key: this.profVal.key,
      //     value: this.profVal.value,
      //     description: this.profVal.description
      //   }
      //   console.log(newProfile)
      //   // 发出创建事件，通知父组件执行创建操作
      //   this.$emit('on-create', newProfile)
      //   // 清空输入，准备下一次创建
      //   this.onClear()
      // }
      // // 切换创建面板的显示状态
      // this.showCreate = !this.showCreate
    },
    // onClear 方法用于清除搜索条件或新建条目的内容，它会重置所有的搜索条件或新建条目的内容。
    onClear() {
      this.searchVal = ''
      this.profVal.key = ''
      this.profVal.value = ''
      this.profVal.description = ''
      this.$emit('search-clear')
    },
    // speacialCreate 用于多样化创建应用
    speacialCreate(command) {
      // 先隐藏面板
      this.hidePanel = false
      // 根据用户选择发出事件
      if (command === 'autoCreate') {
        this.$emit('auto-create')
      } else if (command === 'manualCreate') {
        this.$emit('manual-create')
      } else if (command === 'importFrom') {
        this.$emit('import')
      }
      // 清空输入
      this.onClear()
    },
    // disableVisible 方法用于在用户按下回车键时，隐藏下拉框。
    disableVisible() {
      this.$refs.selectBox.visible = false
    }
  }
}
</script>

<style scoped>
/deep/ .el-checkbox-button__inner{
  border-left: 1px solid #DCDFE6;
  border-radius: 4px !important;
}

.search-form {
  background-color:white;
  padding: 23px 0 0.1px 0;
  margin-bottom:15px
}
.font-bold{
  font-weight: bold;
}
.div-operation {
  float: right;
  margin-top: 0;
  margin-bottom: 10px;
}
.div-show-total {
  margin-top: 15px;
  margin-bottom: 10px;
}
.el-input {
  padding-right: 30px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.base{
  font-size: 14px;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
</style>
